<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>小说评论</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small" class="admin_from">
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="user_id" placeholder="请输入用户ID"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="nickname" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="title" placeholder="请输入小说标题"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.start_time"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.end_time"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#">
                </el-table-column>
                <el-table-column
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'210':''"
                        label="用户信息">
                    <template slot-scope="scope">
                        <div class="user_list">
                            <img :src="scope.row.userInfo.avatar" alt="" width="30" height="30" class="img">
                            <div>
                                <p>{{scope.row.userInfo.id}}</p>
                                <p>{{scope.row.userInfo.nickname}}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'150':''"
                        prop="images"
                        label="小说信息">
                    <template slot-scope="scope">
                        <img :src="scope.row.coverpic" alt="" width="30" height="30" class="imgs">
                        {{scope.row.title}}
                    </template>
                </el-table-column>
                <el-table-column
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'150':''"
                        prop="content"
                        label="评论内容">
                </el-table-column>
                <el-table-column
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'100':''"
                        prop="created_at"
                        label="评论时间">
                </el-table-column>
                <el-table-column
                        width="210"
                        prop="created_at"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" size="small" plain @click="answer(scope.row)">回复</el-button>
                        <!--                        <el-button type="primary" size="small" plain @click="lookClick(scope.row)">修改</el-button>-->
                        <el-button type="warning" plain size="small" @click="remove(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    @size-change="changeSize"
                    @current-change="changeCurrent"
                    :current-page="params.pagenum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="params.pagesize"
                    :layout="this.$store.state.paginationLayout"
                    :total="params.totals">
            </el-pagination>
        </el-card>
        <el-dialog
                title="回复"
                :visible.sync="dialogVisible"
                :width="this.$store.state.dialogWidth">
            <el-form ref="form" label-width="80px" size="small">
                <!--                <el-form-item label="是否显示">-->
                <!--                    <el-select v-model="form.status" placeholder="请选择状态" clearable>-->
                <!--                        <el-option label="显示" value="1"></el-option>-->
                <!--                        <el-option label="隐藏" value="0"></el-option>-->
                <!--                    </el-select>-->
                <!--                </el-form-item>-->
                <el-form-item label="回复内容">
                    <el-input
                            type="textarea"
                            autosize
                            v-model="form.content">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="small">关闭</el-button>
                  <el-button type="primary" @click="dialogAffirmEdit" size="small">确 定</el-button>
    </span>
        </el-dialog>

    </div>
</template>

<script>
  export default {
    name: "Novel_Comments",
    data() {
      return {
        params: {
          pagenum: 1,
          pagesize: 10,
          totals: 0
        },
        dialogVisible: false,
        tableData: [],
        content: '',
        form: {
          content: '',
          status: '',
        },
        nickname: '',
        user_id: '',
        title: '',
        searchForm: {
          start_time: '',
          end_time: '',
        },
        id: '',
      }
    },
    created() {
      this.getList()
    },
    watch: {
      nickname(e) {
        this.params.pagenum = 1;
        this.getList()
      },
      user_id(e) {
        this.params.pagenum = 1;
        this.getList()
      },
      title(e) {
        this.params.pagenum = 1;
        this.getList()
      }
    },
    methods: {
      getList() {
        let data = {
          page: this.params.pagenum,
          page_size: this.params.pagesize,
          nickname: this.nickname,
          user_id: this.user_id,
          title: this.title,
          start_time: this.searchForm.start_time,
          end_time: this.searchForm.end_time,
        };
        this.$axios.post("writer/novel_comments/index", data).then((res) => {
          this.params.totals = res.data.count;
          this.tableData = res.data.list;
        });
      },
      // 每页显示多少条
      changeSize(val) {
        this.params.pagesize = val;
        this.getList()
      },
      // 当前显示的页数
      changeCurrent(val) {
        this.params.pagenum = val;
        this.getList()
      },
      remove(id) {
        this.$confirm('确定要进行操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {id: id};
          this.$axios.post('writer/novel_comments/delete', param).then((res) => {
            this.$message.success('删除成功!');
            if (Math.floor((parseInt(this.params.totals) - 1) / this.params.pagesize) == (parseInt(this.params.totals) - 1) / this.params.pagesize && ((Math.ceil((parseInt(this.params.total) / parseInt(this.params.pagesize)))) - parseInt(this.params.pagenum)) < 1) {
              this.params.pagenum = this.params.pagenum - 1
            }
            this.getList();
          });
        }).catch(() => {

        });
      },
      lookClick(row) {
        this.id = row.id;
        this.form.content = row.content;
        this.form.status = row.status.toString();
        this.dialogVisible = true;
      },
      dialogAffirmEdit() {
        this.$axios.post('writer/novel_comments/reply', {
          id: this.id,
          anid: this.anid,
          content: this.form.content
        }).then((res) => {
          this.$message.success('回复成功');
          this.dialogVisible = false;
          this.getList();
        });
      },
      search() {
        this.params.pagenum = 1;
        this.getList();
      },
      answer(row) {
        this.id = row.id;
        this.anid = row.anid;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style scoped>
    .user_list {
        display: flex;
        align-items: center;
    }

    .user_list .img {
        margin-right: 5px;
    }

    .imgs {
        vertical-align: middle;
    }
</style>